﻿<!doctype html>css
<html>
<head>
    <meta charset="utf-8">
    <link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="~/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="~/css/base.css" />
    <link rel="stylesheet" href="~/css/info-mgt.css" />
    <style>
        .layui-layer-title{background:url(images/righttitlebig.png) repeat-x;font-weight:bold;color:#46647e; border:1px solid #c1d3de;height: 33px;line-height: 33px;}
        .tabe_bot label{width: 70px;text-align: right;font-size: 14px;font-weight: 900;color: #46647e}
        .l_left{float: left;margin-left: 2px;}
        .tabe_bot input,.tabe_bot  select{width: 180px;height: 30px;border-radius: 6px;margin:0 20px 0 0;border: none;border: 1px #ccc solid}
        .tabe_btn{width: 60px;height: 30px;background-color: #68b86c;border: none;border-radius: 6px;color: #fff}
    </style>
    <title>邮件管理</title>
</head>

<body><div class="emal_left">
    <div class="email_top">
       <a href="#" class="a_border"><i class="get_i"></i> 收信</a>
        <a href="#" onclick="openlayer()"><i class="write_i"></i>写信</a>
    </div>
    <ul class="email_ul">
        <li class="li_active">收件箱<span>12</span></li>
        <li>草稿箱<span>12</span></li>
        <li>已发送<span>12</span></li>
        <li>回收站<span>12</span></li>
    </ul>
</div>
<div class="emal_right">
<div  class="email_con" style="display: block">
<div class="title"><h2>收件箱</h2></div>
<div class="query">
    <div class="tabe_bot">
        <div class="l_left"><label>邮件名称：</label><input type="text" placeholder="请输入邮件名称"></div>
        <div class="l_left"><label>是否查看：</label><select>
            <option>查看</option>
            <option>未查看</option>
        </select></div>
        <div class="l_left"><label>时间：</label><input id="demo" placeholder="输入提交时间" /></div>
        <button class="tabe_btn ">查询</button>
        <div class="clear"></div>
    </div>
</div>
<div class="table-operate ue-clear">
    <a href="#" class="sent01"  onclick="openlayer()">转发</a>
    <a href="javascript:;" class="del">删除</a>
    <a href="javascript:;" class="back">回复</a>

    <a href="javascript:;" class="out">导出</a>
</div>
<div class="table-box">
    <table id="table" class="table_style"></table>
</div>
<div class="pagination ue-clear"></div>
</div>
    <div  class="email_con">
        <div class="title"><h2>草稿箱</h2></div>
        <div class="query">
            <div class="tabe_bot">
                <div class="l_left"><label>邮件名称：</label><input type="text" placeholder="请输入邮件名称"></div>
                <div class="l_left"><label>是否查看：</label><select>
                    <option>查看</option>
                    <option>未查看</option>
                </select></div>
                <div class="l_left"><label>时间：</label><input id="demo01" placeholder="输入提交时间" /></div>
                <button class="tabe_btn ">查询</button>
                <div class="clear"></div>
            </div>
        </div>
        <div class="table-operate ue-clear">
            <a href="#" class="sent01"  onclick="openlayer()">发送</a>
            <a href="javascript:;" class="del">删除</a>
            <!--<a href="javascript:;" class="back">回息</a>-->

            <a href="javascript:;" class="out">导出</a>
        </div>
        <div class="table-box">
            <table id="table01" class="table_style"></table>
        </div>
        <div class="pagination ue-clear"></div>
    </div>
    <div  class="email_con">
        <div class="title"><h2>已发送</h2></div>
        <div class="query">
            <div class="tabe_bot">
                <div class="l_left"><label>邮件名称：</label><input type="text" placeholder="请输入邮件名称"></div>
                <div class="l_left"><label>是否查看：</label><select>
                    <option>查看</option>
                    <option>未查看</option>
                </select></div>
                <div class="l_left"><label>时间：</label><input id="demo02" placeholder="输入提交时间" /></div>
                <button class="tabe_btn ">查询</button>
                <div class="clear"></div>
            </div>
        </div>
        <div class="table-operate ue-clear">
            <a href="#" class="sent01"  onclick="openlayer()">发送</a>
            <a href="javascript:;" class="del">删除</a>
            <!--<a href="javascript:;" class="back">回息</a>-->

            <a href="javascript:;" class="out">导出</a>
        </div>
        <div class="table-box">
            <table id="table02" class="table_style"></table>
        </div>
        <div class="pagination ue-clear"></div>
    </div>
    <div  class="email_con">
        <div class="title"><h2>回收站</h2></div>
        <div class="query">
            <div class="tabe_bot">
                <div class="l_left"><label>邮件名称：</label><input type="text" placeholder="请输入邮件名称"></div>
                <div class="l_left"><label>是否查看：</label><select>
                    <option>查看</option>
                    <option>未查看</option>
                </select></div>
                <div class="l_left"><label>时间：</label><input id="demo03" placeholder="输入提交时间" /></div>
                <button class="tabe_btn ">查询</button>
                <div class="clear"></div>
            </div>
        </div>
        <div class="table-operate ue-clear">
            <a href="#" class="sent01"  onclick="openlayer()">还原</a>
            <a href="javascript:;" class="del">删除</a>
            <!--<a href="javascript:;" class="back">回息</a>-->

            <a href="javascript:;" class="out">导出</a>
        </div>
        <div class="table-box">
            <table id="table03" class="table_style"></table>
        </div>
        <div class="pagination ue-clear"></div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<script src="js/date/js/laydate.js"></script>
<script>
    $(function () {
        $('#table').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/datum.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    checkbox:"true",
                    field: 'ID',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '标示',
                    field: 'id',
                    align: 'center',
                    formatter: function (value, row) {
                        var e = '<a  href="#"><img src="images/topmail.png"/> </a> ';

                        return e;
                    }
                },
                {
                    title: "发件人",
                    field: 'class',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '主题',
                    field: 'sex',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '发送时间',
                    field: 'type',
                    align: 'center'
                }


            ]
        });
    });
</script>
<script src="js/date/js/laydate.js"></script>
<script>
    $(function () {
        $('#table01').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/datum.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    checkbox:"true",
                    field: 'ID',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '标示',
                    field: 'id',
                    align: 'center',
                    formatter: function (value, row) {
                        var e = '<a  href="#"><img src="images/topmail.png"/> </a> ';

                        return e;
                    }
                },
                {
                    title: "发件人",
                    field: 'class',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '主题',
                    field: 'sex',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '发送时间',
                    field: 'type',
                    align: 'center'
                }


            ]
        });
    });
</script>
<script>
    $(function () {
        $('#table02').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/datum.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    checkbox:"true",
                    field: 'ID',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '标示',
                    field: 'id',
                    align: 'center',
                    formatter: function (value, row) {
                        var e = '<a  href="#"><img src="images/topmail.png"/> </a> ';

                        return e;
                    }
                },
                {
                    title: "发件人",
                    field: 'class',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '主题',
                    field: 'sex',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '发送时间',
                    field: 'type',
                    align: 'center'
                }


            ]
        });
    });
</script>
<script>
    $(function () {
        $('#table03').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "json/datum.json",
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    checkbox:"true",
                    field: 'ID',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '标示',
                    field: 'id',
                    align: 'center',
                    formatter: function (value, row) {
                        var e = '<a  href="#"><img src="images/topmail.png"/> </a> ';

                        return e;
                    }
                },
                {
                    title: "发件人",
                    field: 'class',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '主题',
                    field: 'sex',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '发送时间',
                    field: 'type',
                    align: 'center'
                }


            ]
        });
    });
</script>
<script>
    !function(){
        laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
        laydate({elem: '#demo'});//绑定元素
        laydate({elem: '#demo01'});//绑定元素
        laydate({elem: '#demo02'});//绑定元素
        laydate({elem: '#demo03'});//绑定元素
    }();
</script>
<script src="js/layer_v2.1/layer/layer.js"></script>
<script type="text/javascript">

    function openlayer(id){
        layer.open({
            type: 2,
            title: '写邮件',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
//            maxmin: true,
            closeBtn:1,
            area: ['98%', '98%'],
            shadeClose: true,
            closeBtn: 1,
            content: 'write_email.html'
            //iframe的url
        });
    }
</script>
<script>

    $(function () {
        $(".email_ul li").each(function (index) {
            $(this).on("click",function () {
                $(".emal_right .email_con").eq(index).fadeIn().siblings("div").stop().hide();
                $(this).addClass("li_active");
                $(this).siblings().removeClass("li_active");

            })
        })
    })
</script>
</html>
